<template>
  <div>
    <el-input style="position: relative;top: 0px;width: 300px;margin-left: 750px" placeholder="请输入搜索的关键字" v-model="wd">
      <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
    </el-input>
    <el-table :data="orderArr">
      <el-table-column label="编号" type="index"></el-table-column>
      <el-table-column label="下单人" prop="username"></el-table-column>
      <el-table-column label="汽车名称" prop="name"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <p v-if="scope.row.status==0" style="font-size: 14px">待支付</p>
          <p v-if="scope.row.status==1" style="font-size: 14px">租赁中</p>
          <p v-if="scope.row.status==2" style="font-size: 14px">已完成</p>
          <p v-if="scope.row.status==3" style="font-size: 14px">已关闭</p>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="gmtCreate"></el-table-column>
      <el-table-column label="操作" width="200px" fixed="right">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="8"
        layout="prev, pager, next, jumper"
        :total= total>
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "AdminOrderView",
  data() {
    return {
      orderArr: [],
      wd: '',
      currentPage: 1, // 当前页码，与后端同步
      pageSize: 8, // 每页显示的数量，可以根据实际情况修改
      total: 0, // 总数量，从后端获取
      page : 1,
    }
  },
  methods: {
    handleCurrentChange(currentPage) {
      console.log(`当前页: ${currentPage}`);
      this.page = currentPage;
      this.axios.get("http://localhost:19286/orders/list/"+currentPage)
          .then((response)=>{
            if (response.data.state==20000){
              // pageData
              this.orderArr = response.data.data.list;
            }
          })
    },
    handleDelete(i, orders) {
      if (confirm("您确认删除此订单信息吗?")) {
        this.axios.post('http://localhost:19286/orders/delete/' + orders.id ).then((response) => {
          if (response.data.state == 20000) {
            this.$message.success("删除成功")
            this.handleCurrentChange(this.page);
            this.orderArr.splice(i, 1)
          }
        })
      }
    },
    search() {
      if (this.wd.trim() == "") {
        this.$message.error("请输入搜索的关键字!")
        return
      }
      this.$router.replace('/admin/order?wd=' + this.wd)
    },
    loadContents() {
      let wd = new URLSearchParams(location.search).get('wd')
      console.log(wd)
      this.axios.get('http://localhost:19286/orders/' + wd + '/search').then((response) => {
        if (response.data.state == 20000) {
          this.orderArr = response.data.data.list
        }
      })
    }

  },
  mounted() {
    this.loadContents()
    this.axios.get("http://localhost:19286/orders/list/"+this.currentPage)
        .then((response) => {
          if (response.data.state == 20000) {
            // pageData
            this.orderArr = response.data.data.list;
            this.total=response.data.data.total;
          }
        })
  },
  beforeRouteUpdate(to, from, next) { //此方法在路由跳转之前执行，如果不执行里面的next则拦截此次跳转
    next()
    this.loadContents()
  }
}
</script>

<style scoped>

</style>